<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
    <title>mcdc Dapp Hello World</title>
</head>

<script type="text/javascript">
    $(document).ready(function() {
        var DAPP_ID = window.location.pathname.split('/')[2];
        var BASE_URL = '/api/dapps/' + DAPP_ID + '/api';
        var State = {
            isLogin: false
        };
        var UserInfo = {
            secret: '',
        };

        function refreshAccount(account) {
            var $table = $('#balanceTable');
            $table.find('tr:not(:first)').remove();
            var $options = $('#assetOptions');
            $options.html('');
            for (var k in account.balance) {
                var balance = Number(account.balance[k]) / 100000000;
                var tr = '<tr><td>' + k + '</td>' + '<td>' + balance + '</td></tr>';
                $table.append(tr);
                $options.append('<option value="' + k + '">' + k + '</option>');
            }
        }

        function onLogin(account) {
            State.isLogin = true;
            $('#loginBtn').val('退出');
            $('#secretInput').hide();

            $('#mainPanel').show();
            refreshAccount(account);
        }

        function login(secret) {
            $.ajax({
                type: 'POST',
                url: BASE_URL + '/openAccount',
                data: {
                    secret: secret
                },
                dataType: 'json',
                success: function(ret) {
                    console.log(ret);
                    if (!ret.success) {
                        alert(ret.error);
                        return;
                    }
                    UserInfo.secret = secret;
                    onLogin(ret.account);
                }
            });
        }

        function logout() {
            $('#loginBtn').val('登录');
            $('#secretInput').show();
            $('#mainPanel').hide();
            State.isLogin = false;
        }

        function withdrawal(secret, amount) {
            $.ajax({
                type: 'POST',
                url: BASE_URL + '/withdrawal',
                data: {
                    secret: secret,
                    amount: amount
                },
                dataType: 'json',
                success: function(ret) {
                    console.log(ret);
                    if (!ret.success) {
                        alert(ret.error);
                        return;
                    }
                    $('#withdrawalAmountinput').val('');
                    setTimeout(login.bind(null, secret), 1000 * 10);
                }
            });
        }

        function transfer(secret, asset, amount, address) {
            $.ajax({
                type: 'PUT',
                url: BASE_URL + '/transaction',
                data: {
                    secret: secret,
                    amount: amount,
                    token: asset,
                    recipientId: address
                },
                dataType: 'json',
                success: function(ret) {
                    console.log(ret);
                    if (!ret.success) {
                        alert(ret.error);
                        return;
                    }
                    $('#transferAmount').val('');
                    $('#transferAddress').val('');
                    setTimeout(login.bind(null, secret), 1000 * 10);
                }
            });
        }

        $('#loginBtn').click(function () {
            if (State.isLogin) {
                logout();
            } else {
                login($('#secretInput').val());
            }
        });

        $('#withdrawalBtn').click(function () {
            var amount = Number($('#withdrawalAmountinput').val());
            if (amount <= 0 || isNaN(amount)) {
                return alert('金额输入不正确!');
            }
            var realAmount = parseFloat((amount * 100000000).toFixed(0));
            withdrawal(UserInfo.secret, realAmount);
        });

        $('#transferBtn').click(function () {
            var assetName = $('#assetOptions').val();
            var amount = Number($('#transferAmount').val());
            var address = $('#transferAddress').val();
            if (!assetName || isNaN(amount) || amount <= 0 || !address) {
                return alert('您输入的参数不正确!');
            }
            var realAmount = parseFloat((amount * 100000000).toFixed(0));
            transfer(UserInfo.secret, assetName, realAmount, address);
        });
    });
</script>

<body>
    <h1>mcdc Dapp Hello World</h1>
    <div>
        <input type="password" id="secretInput" placeholder="请输入主密码">
        <input type="button" value="登录" id="loginBtn">
    </div>
    <div id="mainPanel" style="display: none;">
        <hr/>
        <h2>账户资产</h2>
        <div>
            <table id="balanceTable" width="200px" border="1">
                <tr>
                    <th>资产</th>
                    <th>余额</th>
                </tr>
            </table>
        </div>

        <hr/>
        <h2>XAS提现</h2>
        <div>
            <input type="text" id="withdrawalAmountinput" placeholder="请输入提现金额, 仅限XAS">
            <input type="button" value="提现" id="withdrawalBtn">
        </div>

        <hr/>
        <h2>链内转账</h2>
        <div>
            <select id="assetOptions"></select>
            <input type="text" id="transferAmount" placeholder="请输入转账金额">
            <input type="text" id="transferAddress" placeholder="请输入转账地址">
            <input type="button" id="transferBtn" value="转账">
        </div>
    </div>
</body>

</html>